<template>
    <div>
      <div class="header">
        <!--地址 登录-->
        <div class="site-login">
          <svg class="v-md">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#location"></use>
          </svg>
          <span class="site" v-text="msg"></span>
          <div class="index-login" id="div2js">
            <a href="#/login">登录</a>
          </div>
        </div>
        <!--搜索框-->
        <div class="seek">
          <input type="text" placeholder="搜索产品，商家">
        </div>
        <div class="option">
          <a href="javascript:;" v-for="b in bd"><span>{{b.title}}</span></a>
        </div>
      </div>
    </div>
</template>

<script>
    // import HeaderComponent from './components/header.vue'
   import { mapGetters } from 'vuex'
    export default{
        //父组件传入的数据
        props: {} ,
        //本地数据
        data(){
            return {
                msg: '上海市浦东新区唐镇创新佳苑~~~',
                bd:[
                  {
                    title :'辣鸭脖'
                  },
                  {
                    title :'韩国炸鸡'
                  },
                  {
                    title :'我是一只鸡'
                  },
                  {
                    title :'脆皮鸡'
                  },
                  {
                    title :'麦当劳'
                  },
                  {
                    title :'老鸭粉丝'
                  },
                  {
                    title :'牛排'
                  },
                  {
                    title :'黄焖鸡'
                  },
                  {
                    title :'铁板炒饭'
                  },
                  {
                    title :'麻辣香锅'
                  },
                  {
                    title :'煎饼'
                  }
                ]
            }
        } ,
        //方法
        methods: {

        },
        //进入页面加载
        mounted () {
         var setlogin = this.$store.state.isLogin;
          if(setlogin !== false){
            var el = document.getElementById('div2js');
            el.parentNode.removeChild(el);
          }
        } ,
        //计算属性
        computed: {} ,
        //监控数据变化
        watch: {}
    }
</script>

<style lang="less" scoped>
  input{
    outline:medium;
  }
.header{
  width: 100%;
  height: 1.2rem;
  padding: 0.1rem;
  background: #0096ff;
  box-sizing: border-box;
  overflow: hidden;
}
  .site{
    font-size: 0.14rem;
    color: #fff;
  }
.v-md {
  vertical-align: middle;
  width: 0.2rem;
  height: 0.2rem;
}
  .site-login{
    position: relative;
  }
  .index-login{
    position: absolute;
    right: 0;
    top:0;
  }
  .index-login a{
    color:#fff;
    font-size: 0.14rem;
  }
  .seek{
    width: 100%;
    margin:0 auto;
    text-align: center;
    padding: 0.1rem 0 0.1rem 0;
  }
.seek input{
  width: 3.3rem;
  border: 0;
  background: #fff;
  font-size: 0.14rem;
  text-align: center;
  height: 0.35rem;
  border-radius: 0.2rem;
}
  .option{
    height: 0.5rem;
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
    font-size: 0.12rem;
  }
  .option a{
    color:#fff
  }
  .option a span{
    padding: 0.07rem;
  }
</style>
